<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/3/8
  Time: 15:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <title>购买页</title>
    <base href="<%=request.getContextPath()%>/"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="common/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="common/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/personal.css" media="all">
    <link href="bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <style>
        span{
            cursor: pointer;
        }
        h1{
            text-align: center;
        }
        #headler{
            font-size: 20px;
            color: #5BC0DE;
        }
        #accessinfo{
            padding-top: 50px;
        }
        #result span{
            color: #5bc0de;
            font-size: 16px;
        }
        #headler select{
            height: 30px;
        }
        #serieschoose,#modelchoose ,#piecenamechoose{
            float: left;
            padding-left: 150px;
            padding-top: 30px;
        }
       /* #serieschoose,#modelchoose ,#piecenamechoose,#accessinfo{
            padding-top: 30px;
        }*/
    </style>
</head>
<body>
    <h1>
        <span class="label label-info"  id="seriesName">按车系查询</span>
        <span class="label label-danger" id="shoppinngcar">点击此购买</span>
        <%--<span class="label label-info">按零件号查询</span>--%>
        <form id="form1" action="shopping/carlist" method="post">
            <input type="hidden" name="seriesName" id="chexi"/>
            <input type="hidden" name="modelName" id="chexing"/>
            <input type="hidden" name="pieceName" id="peijianname"/>
            <input type="hidden" name="pieceNo" id="peijiantype"/>
        </form>
    </h1>
    <div id="headler">
        <div id="serieschoose">
            <%--<p>请选择车系</p>--%>
            <select name="" id="testSelect">
                <option value="">请选择车系</option>
                <c:forEach var="series" items="${seriesList}">
                    <option value="${series.seriesId}">${series.seriesName}</option>
                </c:forEach>
            </select>
        </div>
        <div id="modelchoose">
            <%--<p>请选择车型</p>--%>
            <select name="" id="modelname">
                <option value="">请选择车型</option>
            </select>
        </div>
        <div id="piecenamechoose">
            <%--<p>请选择配件类型</p>--%>
            <select name="" id="piecename">
                <option value="">请选择配件类型</option>
            </select>
        </div>

    </div>

    <div id="result" style="margin-left: 50px">
        <span>查询的结果:</span><span id="chooseresult" style="color: #555555"></span>
    </div>
    <!-- 操作日志 -->
    <%--<div id="accessinfo">
        <table border="1px" style="width: 100%">--%>
    <section class="layui-larry-box" id="sectiontabel">
            <div class="larry-personal">
                <%--<span>查询的结果</span><p id="chooseresult"></p>--%>
            </div>
            </blockquote>

                <!-- 操作日志 -->
        <div class="layui-form news_list" id="accessinfo">

            <table class="layui-table">
                <colgroup>
                    <col width="50">
                    <col>
                    <col width="9%">
                    <col width="9%">
                    <col width="9%">
                    <col width="9%">
                    <col width="9%">
                    <col width="15%">
                </colgroup>
                <thead>
                <tr>
                    <th>零件ID</th>
                    <th>零件号</th>
                    <th>零件名称</th>
                    <th>零件英文名称</th>
                    <th>供应商</th>
                    <th>易损件</th>
                    <th>是否直供</th>
                    <th>最小采购量</th>
                    <th>本体图</th>
                    <th>剩余总量</th>
                    <th>关联采购组</th>
                    <th>销售单价USD</th>
                    <th>采购单价USD</th>
                </tr>
                </thead>
                <tbody class="news_content" id="infolist">
                <%--<tbody id="infolist">

                </tbody>--%>
            </table>
        </div>
    </section>
    <%--进行订购--%>
    <div></div>

</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="common/layui/layui.js"></script>
<script type="text/javascript" src="js/newslist.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>

<script type="text/javascript">
    /*$("#seriesName").click(function () {
        if($("#modelname").val() != ""){
            $("#modelname").html("");
        }
        /!*$("#piecename").html("");
        $("#infolist").html("");*!/

    });*/

    $("#testSelect").change(function(){
        var op = $("#testSelect").val();
        /*获得车系*/
        var seriestext = $("#testSelect option:selected").text();
        $("#chexi").val(seriestext);
        //alert("testselect======="+seriestext);
        $.ajax({
            url:"shopping/modelList",
            async:true,
            data:{"seriesId":op},
            success:function(data){
                //$("#modelname").val()!="".html("");
                $.each(data,function (index,obj) {
                    $("#modelname").append("<option value='"+obj.modelNo+"'>"+obj.modelName+"</option>");
                })
                    $("#modelname").change(function () {
                        var op = $("#modelname").val();
                        /*获得车型的结果*/
                        var modeltext = $("#modelname option:selected").text();
                        $("#chexing").val(modeltext);
                        //alert("车型的结果==="+modeltext);
                        $.get("shopping/pieceList",{"modelNo":op},
                            function (data) {
                                //alert("modelNo = "+op);
                                //$("#piecename").html("");
                                $.each(data,function (index,obj) {
                                    $("#piecename").append("<option value='"+obj.pieceNo+"'>"+obj.pieceName+"</option>");
                                    $("#piecename").change(function () {
                                        var pn = $("#piecename").val();
                                        /*获得配件总类名称*/
                                        var piecetext = $("#piecename option:selected").text();
                                        var piecevale = $("#piecename option:selected").val();
                                        $("#peijianname").val(piecetext);
                                        $("#peijiantype").val(piecevale);
                                        //alert("配件总名称==="+piecevale);
                                        /*将获得的结果全部显示在查询结果中*/
                                        $("#chooseresult").text(seriestext+modeltext+piecetext);
                                        $.get("shopping/accessinfoList",{"pieceNo":pn},
                                            function (data) {
                                                $("#infolist").html("");
                                                $.each(data,function (index,obj) {
                                                    //alert(obj);
                                                    $("#infolist").append("<tr><td>"+obj.pieceId+"</td>"+"<td>"+obj.pieceNo+"</td>"+"<td>"+obj.pieceName+"</td>"+"<td>"+obj.pieceEname+"</td>"+"<td>"+obj.supplyName+"</td>"+"<td>"+obj.damagType+"</td>"+"<td>"+obj.isDirect+"</td>"+"<td>"+obj.minQuan+"</td>"+"<td>"+obj.pieceIcon+"</td>"+"<td>"+obj.piecePrice+"</td>"+"<td>"+obj.memo+"</td>"+"<td>"+obj.priceUsdX+"</td>"+"<td>"+obj.priceUsdC+"</td></tr>");
                                                });
                                        });
                                    });
                                })
                        });
                    });
            }
        });
    });

    /*进行购买*/
    $("#shoppinngcar").click(function () {
        var seriesName = $("#chexi").val();
        var modelName = $("#chexing").val();
        var pieceName = $("#peijianname").val();
        var pieceNo = $("#peijiantype").val();
        alert(seriesName+modelName+pieceName+pieceNo);
        /*车系*/
        var seriestext = $("#testSelect option:selected").text();
        /*车型*/
        var modeltext = $("#modelname option:selected").text();
        /*配件总类ID*/
        var piecevale = $("#piecename option:selected").val();
        /*获得配件总类名称*/
        var piecetext = $("#piecename option:selected").text();

        //$.get("shopping/carlist",{"seriesName":seriestext,"modelName":modeltext,"pieceName":piecetext,"pieceNo":piecevale}

        $("#form1").submit();
    });

    layui.use(['jquery','layer','element','laypage'],function(){
        window.jQuery = window.$ = layui.jquery;
        window.layer = layui.layer;
        var element = layui.element(),
            laypage = layui.laypage;


        laypage({
            cont: 'page',
            pages: 10 //总页数
            ,
            groups: 5 //连续显示分页数
            ,
            jump: function(obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                var curr = obj.curr;
                if(!first) {
                    //layer.msg('第 '+ obj.curr +' 页');
                }
            }
        });

    laypage({
            cont: 'page2',
            pages: 10 //总页数
            ,
            groups: 5 //连续显示分页数
            ,
            jump: function(obj, first) {
                //得到了当前页，用于向服务端请求对应数据
                var curr = obj.curr;
                if(!first) {
                    //layer.msg('第 '+ obj.curr +' 页');
                }
            }
        });
    });
</script>
</html>
